<template>
	<page-container :isback="true" :base-tab="1" :shownav="true" navtitle="提建议" :istabbox="false">
		<view class="content-root content">
			<view class="root-container form-root">
				<view class="form-container" style="padding: 20rpx;">
					<u-form labelWidth="120" labelPosition="top" :model="formData" :rules="rules"
						ref="hagdonGatherForm">
						<u-form-item :required="true" label="建议分类" @click="openSuggestType" borderBottom
							prop="suggestTypeName">
							<u-input placeholder="请选择分类" disabledColor="#ffffff" disabled
								v-model="formData.suggestTypeName">
							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item :required="true" label="建议标题" borderBottom prop="suggestTitle">
							<u-input placeholder="请输入建议标题" v-model="formData.suggestTitle" />
						</u-form-item>
						<u-form-item :required="true" label="建议内容" borderBottom prop="suggestContent">
							<u-textarea maxlength="-1" v-model="formData.suggestContent"
								placeholder="请输入内容"></u-textarea>
						</u-form-item>
						<u-form-item label="添加图片" borderBottom prop="img">
							<upload-img @submit="setImg"></upload-img>
						</u-form-item>
						<u-form-item label="领衔代表" @click="openMainRepresentative" borderBottom
							prop="mainRepresentativeNames">
							<u-input placeholder="请选择领衔代表" disabledColor="#ffffff" disabled
								v-model="formData.mainRepresentativeNames">
							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item :required="true" label="联名代表" @click="openMinorRepresentative" borderBottom
							prop="minorRepresentativeNames">
							<u-input placeholder="请选择联名代表" disabledColor="#ffffff" disabled
								v-model="formData.minorRepresentativeNames">
							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item :required="true" label="建议解决时间" @click="openExpectDate" borderBottom
							prop="expectDate">
							<u-input placeholder="请选择建议解决时间" disabledColor="#ffffff" disabled
								v-model="formData.expectDate">
							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="是否公开" borderBottom prop="suggestPublic">
							<u-radio-group v-model="formData.suggestPublic" placement="row">
								<u-radio :customStyle="{marginBottom: '8px'}" label="公开" :name="'1'">
								</u-radio>
								<u-radio :customStyle="{marginBottom: '8px'}" label="不公开" :name="'0'">
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
				</view>
				<view class="button-container">
					<u-button class="submit-style button" text="提 交" @click="submit"></u-button>
				</view>

				<u-picker @cancel="suggestOpen = false" :show="suggestOpen" :columns="[suggestList]" keyName="name"
					title="请选建议分类" @confirm="suggestTypeSelect"></u-picker>

				<bottom-popup @cancel="closeMainRepresentative" @submit="mainRepresentativeSelect" title="领衔代表"
					:open="mainRepresentativeOpen" @close="closeMainRepresentative">
					<choose-main-representative :auth-type="formData.authType" ref="chooseMainRepresentativeRef"
						:multiple="false"></choose-main-representative>
				</bottom-popup>

				<bottom-popup @cancel="closeMinorRepresentative" @submit="minorRepresentativeSelect" title="联名代表"
					:open="minorRepresentativeOpen" @close="closeMinorRepresentative">
					<choose-main-representative :auth-type="formData.authType"
						ref="chooseMainRepresentativeRef"></choose-main-representative>
				</bottom-popup>

				<u-datetime-picker @cancel="expectDateOpen = false" ref="datetimePicker" :show="expectDateOpen"
					v-model="currentDate" mode="date" @confirm="setExpectDate" :minDate="minDate"
					:formatter="formatter"></u-datetime-picker>


				<u-loading-page :loading="loading"></u-loading-page>
			</view>
		</view>
	</page-container>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		getQueryHeaders,
		requestGet,
		requestPost
	} from "@/util/means/request";
	import {
		GET_SUGGEST_DEFAULT_FORM_DATA,
		QUERY_ALLOW_SELECT_SUGGEST_TYPE,
		SUBMIT_SUGGEST
	} from "@/api/suggestion";
	import bottomPopup from "@/components/bottomPopup.vue";
	import ChooseMainRepresentative from "@/components/chooseMainRepresentative.vue";
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		successPagePath
	} from "@/util/publicConfig";

	export default {
		mixins: [baseMixins],
		components: {
			uploadImg,
			bottomPopup,
			ChooseMainRepresentative
		},
		data() {
			return {
				loading: false,
				formData: {
					// 	建议身份
					authType: "2",
					// 	期望解决时间
					expectDate: "",
					// 领衔代表
					mainRepresentatives: [{
						representativeId: "",
						representativeName: ""
					}],
					mainRepresentativeNames: '',
					// 联名代表
					minorRepresentatives: [{
						representativeId: "",
						representativeName: ""
					}],
					minorRepresentativeNames: '',
					// 	是否属于多次提交(字典bus_suggest_ms)
					multipleSubmission: "",
					// 	代表委员名称
					representativeName: "",
					// 	代表委员电话
					representativePhone: "",
					// 	建议内容
					suggestContent: "",
					// 	建议附件
					suggestFileArr: [],
					// 	建议内容是否公开(0-不公开,1公开)
					suggestPublic: '0',
					// 	建议标题
					suggestTitle: "",
					// 	建议类别(从接口获取)
					suggestType: "",
					// 	建议类别
					suggestTypeName: ""
				},
				rules: {
					suggestTypeName: {
						required: true,
						message: '请选择建议分类',
						trigger: ['blur', 'change']
					},
					suggestTitle: {
						required: true,
						message: '请输入建议标题',
						trigger: ['blur', 'change']
					},
					suggestContent: {
						required: true,
						message: '请输入建议内容',
						trigger: ['blur', 'change']
					},
					mainRepresentativeNames: {
						required: true,
						message: '请选择领衔代表',
						trigger: ['blur', 'change']
					},
					minorRepresentativeNames: {
						required: true,
						message: '请选择联名代表',
						trigger: ['blur', 'change']
					},
					expectDate: {
						required: true,
						message: '请选择期望解决时间',
						trigger: ['blur', 'change']
					},
					suggestPublic: {
						required: true,
						message: '请选择是否公开',
						trigger: ['blur', 'change']
					}
				},


				suggestOpen: false,
				suggestList: [],

				mainRepresentativeOpen: false,
				minorRepresentativeOpen: false,
				expectDateOpen: false,

				minDate: Number(new Date()),
				currentDate: Number(new Date())
			}
		},
		methods: {
			initFormData() {
				let owner = this
				requestGet({
					url: GET_SUGGEST_DEFAULT_FORM_DATA,
					data: {
						authType: this.formData.authType
					},
					header: getQueryHeaders()
				}).then(res => {
					let {
						mainRepresentatives
					} = res;
					owner.formData.mainRepresentativeNames = mainRepresentatives.map(item => item
						.representativeName).join()
					owner.formData.mainRepresentatives = mainRepresentatives
					owner.$nextTick(() => {
						owner.$refs.hagdonGatherForm.validateField('mainRepresentativeNames')
					})
				})
			},
			initSuggestList() {
				let owner = this
				requestGet({
					url: QUERY_ALLOW_SELECT_SUGGEST_TYPE,
					data: {
						authType: this.formData.authType
					},
					header: getQueryHeaders()
				}).then(res => {
					owner.suggestList = res.map(item => {
						let {
							typeName: name,
							id: value
						} = item;
						return {
							name,
							value
						}
					})
				})
			},
			openSuggestType() {
				this.suggestOpen = true
			},
			suggestTypeSelect(select) {
				this.formData.suggestTypeName = select.value[0].name;
				this.formData.suggestType = select.value[0].value
				this.$refs.hagdonGatherForm.validateField('suggestTypeName')
				this.suggestOpen = false
			},

			openMainRepresentative() {
				this.mainRepresentativeOpen = true
			},
			closeMainRepresentative() {
				this.mainRepresentativeOpen = false
			},
			mainRepresentativeSelect() {
				this.formData.mainRepresentatives = this.$refs.chooseMainRepresentativeRef.getCheckedData()
				if (!Array.isArray(this.formData.mainRepresentatives) || this.formData.mainRepresentatives.length <= 0)
					return
				this.formData.mainRepresentativeNames = this.formData.mainRepresentatives.map(item => item
					.representativeName).join()
				this.$refs.hagdonGatherForm.validateField('mainRepresentativeNames')
				this.mainRepresentativeOpen = false
			},

			openExpectDate() {
				this.expectDateOpen = true
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			setExpectDate(e) {
				this.formData.expectDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.expectDateOpen = false
			},

			openMinorRepresentative() {
				this.minorRepresentativeOpen = true
			},
			closeMinorRepresentative() {
				this.minorRepresentativeOpen = false
			},
			minorRepresentativeSelect() {
				this.formData.minorRepresentatives = this.$refs.chooseMainRepresentativeRef.getCheckedData()
				if (!Array.isArray(this.formData.minorRepresentatives) || this.formData.minorRepresentatives.length <= 0)
					return
				this.formData.minorRepresentativeNames = this.formData.minorRepresentatives.map(item => item
					.representativeName).join()
				this.$refs.hagdonGatherForm.validateField('minorRepresentativeNames')
				this.minorRepresentativeOpen = false
			},
			setImg(img) {
				this.formData.suggestFileArr = img.map(item => item.url)
			},
			submit() {
				this.loading = true;
				let owner = this
				this.$refs.hagdonGatherForm.validate().then(res => {
					requestPost({
						url: SUBMIT_SUGGEST,
						data: owner.formData,
						header: getQueryHeaders()
					}).then(res => {
						uni.$u.toast('添加成功');
						owner.redirectToPage(successPagePath)
					}).finally(() => {
						owner.loading = false
					})
				}).catch(errors => {
					owner.loading = false
					uni.$u.toast('校验失败')
				})
			},
		},
		async created() {
			this.initSuggestList()
			this.initFormData()
		}
	}
</script>

<style lang="scss" scoped>
	.content-root {
		overflow: auto;
		height: 100%;
	}

	::v-deep .u-radio {
		margin-right: 30rpx;
	}

	::v-deep .u-textarea {
		height: 500rpx
	}

	::v-deep .uni-textarea-wrapper {
		height: 500rpx
	}
</style>